<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html{
            height: 4000px;
        }
        .container{
            width: 800px;
            height: 800px;
            margin: 0 auto;
            outline: 1px solid red;
            padding: 1px;
            position: relative;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: rgba(123, 130, 230, 0.473);
            /* margin: 50px 0 0 100px; */
            outline: 1px solid black;
        }
        .b1{
            position: relative;
            /* 向右走50px */
            left:40px; 
            /* 向左走50px */ 
            /* right: 50px; */
            /* bottom:100px */
            top: 100px;
        }
        .t1{
            /* position: relative; */
            top: 100px;
            left: 50px;
        }
        .b2{
            position: absolute;
            top: 100px;
            left: 200px;
        }
        .pd{
            padding: 40px;
            outline: 1px solid black;
        }
        .grandfather{
            width: 800px;
            height: 800px;
            background-color: rgb(193, 216, 166);
            position: relative;
        }
        .father{
            width: 600px;
            height: 600px;
            background-color: rgb(235, 192, 192);
            position: relative;
        }
        .self{
            width: 300px;
            height: 300px;
            background-color: rgb(157, 189, 207);
            /* position: relative; */
        }
        .self2{
            width: 100px;
            height: 100px;
            background-color: #dffab5;
            position: relative;
            top:-20px;

        }
        .child{
            width: 100px;
            height: 100px;
            background-color: rgb(148, 59, 59);
            /* position: absolute; */
            /* bottom: 0; */
            top:-10px;
            left: 0;
        }
        .t1{
            background-color: rgb(79, 201, 170);
            position: absolute;
            top: 50px;
            width: 50px;
            height: 50px;
            z-index: 10;
        }
        .fixed{
            position: fixed;
            right: 100px;
            bottom: 50px;
        }
        .fs{
            width: 100px;
            height: 300px;
            background-color: rgb(238, 178, 178);
            position: fixed;
            top: 50px;
            left: 20px;
            z-index: 11;
        }
        .t2{
            background-color: rgb(238, 51, 51);
            z-index: 12;
        }
        .c2{
            outline: 1px solid red;
        }
        .fl{
            float: left;
        }
    </style>
</head>
<body>
    <!-- 相对定位
        1.以自己的原本位置为参考点
        2.left向右走，rigth向左走，top向下走，bottom向上走。数值可以是负数
        3.显示属性不会发生变化，也不会脱离文档流
        4.相对定位的元素层级比不定位元素要高

    -->
    <div class="container">
        <div class="b1 box"></div>
        <span class="t1">测试文字</span>
        <span class="">测试文字</span>
        <div class="box b2"></div>
    </div>
    <!-- 绝对定位
        1.按照直系向上寻找，找到第一个有定位的元素（relative,absolute,注意static不算，如果找到则以这个元素为参考进行定位。
        2.left 元素距离定位元素左边界的距离，right 元素距离定位元素右边界的距离，top和bottom以此类推，数值可以是负数。
        3.绝对定位的元素会脱离文档流。
        4.绝对定位的元素和向对定位的元素层级一样，但是谁在后面谁的层级高
        5.绝对定位的元素会变成块级元素，类似浮动。
        
        

    -->
    <div class="grandfather pd">
        <div class="father pd">
            
            <div class="self pd">
                
                <span class="t1">来找我</span>
                <div class="child pd"></div>
                
                <span>他在前面过不来</span>
                
            </div>
            <!-- <div class="self2 pd"></div> -->
            <div class="self2 pd">相对定位i的元素</div>
            
        </div>
    </div>
    <!-- 固定定位
        1.元素脱离文档流
        2.变成块级元素
        3.比普通元素层级高
    -->
    <span class="t2">固定定位文字测试</span>
    <div class="box fixed">固定定位</div>
    <span>固定定位文字测试</span>
    <span class="fs">固定定位的文字</span>
    <div class="c2">
        <div class="box fl">我是浮动元素</div>
    </div>
    <!-- z-index
    1.调整元素的显示层级，数字越大层级越高，越会显示的最上面
    2.只对定位的元素有效果
    3.如果希望普通元素也可以设置层级，可以叫一个相对定位
    -->
</body>
</html>